<%@ page pageEncoding="UTF-8" %>
<%@ include file="common/global.jsp" %>
<head>
    <%@ include file="common/meta.jsp" %>
    <title><f:message key="common.title"/> - <f:message key="menu.components.jqueryui"/></title>
    <%@ include file="common/css.jsp" %>
    <link rel="stylesheet" href="${BASE}/www/css/ui-lightness/jquery-ui-1.8.21.custom.css">
    <style>

        #eq span {
            height: 175px;
            float: left;
            margin: 15px;
        }

    </style>

</head>

<body>

<div id="wrapper">


<%@ include file="common/topbar.jsp" %>
<%@ include file="common/header.jsp" %>

    <div id="masthead">

        <div class="container">

            <div class="masthead-pad">

                <div class="masthead-text">
                    <h2>jQuery UI Elements</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div> <!-- /.masthead-text -->

            </div>

        </div> <!-- /.container -->

    </div> <!-- /#masthead -->
    <div id="content">

        <div class="container">


            <div class="row">

                <div class="span12">

                    <h2>Sliders</h2>

                    <hr />

                    <br />

                    <div class="item-row">

                        <div class="item-label">
                            Default Slider
                        </div> <!-- /item-label -->

                        <div class="item-content">
                            <div id="defaultSlider"></div>
                        </div> <!-- /item-content -->

                    </div> <!-- /item-row -->


                    <div class="item-row">

                        <div class="item-label">
                            Increment Slider
                        </div> <!-- /item-label -->

                        <div class="item-content">
                            <span>Donation amount ($50 increments):</span>
                            <span id="incrementAmount" style="border:0; color:#f6931f; font-weight:bold;"></span>
                            <div id="incrementSlider" class="slider-primary" style="margin-top: 1em;"></div>
                        </div> <!-- /item-content -->

                    </div> <!-- /item-row -->


                    <div class="item-row">

                        <div class="item-label">
                            Range Slider
                        </div> <!-- /item-label -->

                        <div class="item-content">
                            <span>Price range:</span>
                            <span id="amount" style="border:0; color:#f6931f; font-weight:bold;"></span>

                            <div id="rangeSlider" class="slider-secondary" style="margin-top: 1em;"></div>
                        </div> <!-- /item-content -->

                    </div> <!-- /item-row -->


                    <div class="item-row">

                        <div class="item-label">
                            Minimum Value Slider
                        </div> <!-- /item-label -->

                        <div class="item-content">
                            <span>Maximum price:</span>
                            <span id="rangeMinAmount" style="border:0; color:#f6931f; font-weight:bold;"></span>
                            <div id="rangeMinSlider" class="slider-tertiary" style="margin-top: 1em;"></div>
                        </div> <!-- /item-content -->

                    </div> <!-- /item-row -->


                    <div class="item-row">

                        <div class="item-label">
                            Vertical Slider
                        </div> <!-- /item-label -->

                        <div class="item-content">
                            <div id="eq">
                                <span>88</span>
                                <span class="slider-primary">77</span>
                                <span class="slider-secondary">55</span>
                                <span class="slider-tertiary">33</span>
                                <span class="">40</span>
                                <span class="slider-primary">45</span>
                                <span class="slider-secondary">70</span>
                            </div>
                        </div> <!-- /item-content -->

                    </div> <!-- /item-row -->


                    <div class="clear"></div>

                    <br />
                    <br />
                    <br />


                    <h2>Date Picker</h2>

                    <hr />

                    <div id="datepicker-inline"></div>

                    <br />
                    <br />

                    <div id="datepicker-multi"></div>


                </div> <!-- /.span12 -->

            </div> <!-- /.row -->


        </div> <!-- /.container -->

    </div> <!-- /#content -->

</div> <!-- /#wrapper -->



<%@ include file="common/footer.jsp" %>
<%@ include file="common/js.jsp" %>
<script src="${BASE}/www/js/libs/jquery-ui-1.8.21.custom.min.js"></script>
<script src="${BASE}/www/js/libs/jquery.ui.touch-punch.min.js"></script>
<script src="${BASE}/www/js/demos/demo.jqueryui.js"></script>


<script>
    $(function () {
        Theme.init ();
        $("#nav2").addClass("active").sibling.removeClass("active");
    });
</script>

</body>
</html>